import {Routes,Route,Navigate,Outlet,NavLink,useNavigate,useLocation,useSearchParams,useParams} from 'react-router-dom';
import React from "react";

const Component = ({element:Element}) => {

    const navigate = useNavigate();

    const location = useLocation();

    const [usp] = useSearchParams();

    const params = useParams();

    return(
        <>
            <Element navigate={navigate} location={location} usp={usp} params={params}/>
        </>
    )
}

export const renderRoutes = (routes) => {
    return (
        <>
            {
                routes.map((route,index) => {
                    const { path, element,children } = route;
                    return (
                        <>
                            <Route path={path} key={index} element={<Component {...route}/>}>
                                {Array.isArray(children) ?  renderRoutes(children) : null}
                            </Route>
                        </>
                    )
                })
            }
        </>
    )
}